<template>
	<view class="page">
		<view class="btn">
			<u-text text="员工管理"></u-text>
			<view class="right">
				<u-button color="#3662EC" text="业绩分析" icon="/static/charts.png"
					@click="goToUrl('/pages/agent/franchisee/employee/analysis')"
					customStyle="marginRight:14rpx"></u-button>
				<u-button color="#3662EC" text="添加员工" icon="plus-circle" iconColor="white"
					@click="goToUrl('/pages/agent/franchisee/employee/add')"></u-button>
			</view>
		</view>
		<view class="header">
			<view class="name">姓名</view>
			<view class="">职务</view>
			<view class="">状态</view>
			<view class="">权限</view>
			<view class="">业绩</view>
			<view class="red"></view>
		</view>
		<view class="lists">
			<view class="list">
				<view class="name">1.沈榕润</view>
				<view class="">管理员</view>
				<view class="">
					<u-switch size="20" v-model="value" @change="change"></u-switch>
				</view>
				<view @click="goToUrl('./add')">编辑</view>
				<view class="">600</view>
				<view class="red" @click="del(id)">删除</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			value: true,
		}
	},
	methods: {
		del() {
			uni.showModal({
				title: '提示',
				content: '确认删除？',
				success: function (res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
}
</script>
<style lang="scss" scoped>
.page {
	background-color: white;
	display: flex;
	flex-direction: column;
}

.btn {
	display: flex;
	padding: 10rpx 10rpx 10rpx 20rpx;

	.right {
		display: flex;
	}
}

.header {
	display: flex;
	background-color: #EEEEEE;

	>view {
		flex: 1;
	}

	.red {
		flex: 0.5;
		padding-right: 30rpx;
	}

	.name {
		text-indent: 1em;
	}

	padding: 14rpx 0rpx;
	font-size: 14px;
}

.lists {
	flex: 1;
	overflow: scroll;
}

.list {
	.red {
		color: #EA0000;
		flex: 0.5;
		padding-right: 30rpx;
	}

	>view {
		flex: 1;
	}

	font-size: 14px;
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
}
</style>
